import { message, Upload } from "antd";
import React, { useState } from "react";
import { addBanner } from "@/api/banner.js";
import { InboxOutlined } from "@ant-design/icons";
const { Dragger } = Upload;

const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
};
//判断图片格式
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("请选择图片");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("图片大于2MB");
  }
  return isJpgOrPng && isLt2M;
};
const Picture = () => {
  const [imageUrl, setImageUrl] = useState([]);
  const handleChange = (info) => {
    getBase64(info.file.originFileObj, (url) => {
      setImageUrl(url);
      addBanner({
        img: imageUrl,
        link: "123",
        alt: "123",
      });
    });
  };
  const props = {
    name: "file",
    multiple: true,
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };
  // const uploadButton = (
  //   <div>
  //     <div
  //       style={{
  //         marginTop: 8,
  //       }}
  //     ></div>
  //   </div>
  // );
  return (
    <>
      {/* <Upload
        name="avatar"
        listType="picture-circle"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: "100%",
              height: "100%",
              borderRadius: "50%",
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload> */}
      <Dragger {...props} beforeUpload={beforeUpload} onChange={handleChange}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        {/* {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: "100%",
              height: "100%",
              borderRadius: "50%",
            }}
          />
        ) : (
          uploadButton
        )} */}
        <p className="ant-upload-text">点击或者拖拽文件到这里上传</p>
        <p className="ant-upload-hint">
          严禁上传公司内部资料或其他违法违规文件
        </p>
      </Dragger>
    </>
  );
};
export default Picture;
